<?php
$masterView = MasterView::getInstance();
$spikes = $masterView->streamView->spikes;
$stream = $masterView->streamView->model;
for ($i = count($spikes) - 1; $i >= 0; $i--) :
    $spike = $spikes[$i];
    if (count($spike['date']) <= 2)
        continue;
    $date = DateTime::createFromFormat('M d h:i:s', end($spike['date']) . ' 00:00:00');
    $d = $date->format("M d Y h:m A");
    $timestamp = $date->format('U');
    ?>
    <script>
        if (data == undefined)
            var data = new Array();
        data[<?php echo $i; ?>] = <?php echo json_encode($spike); ?>;
    </script>
    <li class="mozaic-widget item-29603332 list-item first widget-story_signal" >
        <div class="mention-container alert-container alert-story-container signal-green">
            <div class="mention-left-content">
                <div class="annotable-extra-container"><div class="mozaic-widget widget-signal_annotable_extra" >
                        <p class="mention-time-stamp extend signals-time-stamp-4" data-timestamp="1385973345" data-timestamp-format="timeago"><?php echo Utils::humanTiming($timestamp); ?></p>
                        <!--<p class="mention-type">
                            <a class="platform-link action-color-active" data-value="" rel="tooltip" title="Show all  mentions"> mention</a>
                        </p>-->
                        <p class="mention-type additional-timestamp" data-timestamp="1385973345" data-timestamp-format="MMM D YYYY h:mm A [GMT]"><?php echo $d; ?></p>
                    </div></div>
                <div class="mention-circle-holder twitter">
                    <i class="icon-cirlce-background"></i>
                    <div class="icon-circle-mention background-twitter ">
                        <i class="icon-filter-Spikes \& Bursts"></i>
                    </div>
                </div>
            </div>
            <div class="mention-right-content">
                <div class="mention-right-wrapper">
                    <div class="mention-right-container extend">
                        <div class="mention-content blog_mention">
                            <div class="mozaic-widget widget-signal_top_bar" >
                                <div class="mention-top-bar">

                                    <p class="mention-type signal-type">
                                        <a class="filter-link filter-link-signal-type" data-filter="type__in" data-value="story" rel="tooltip" title="Show all Spike Signals">Spike</a> <span class="signal-type-span">for</span> <a class="filter-link filter-link-stream" data-filter="keyword_id" data-value="1000005765" rel="tooltip" title="Show all <?php echo $stream->name ?> Signals"><i class="icon-stream-company-small"></i><?php echo $stream->name ?><span class="signal-stream-visual"></span></a>
                                    </p>

                                    <p class="mention-type additional-timestamp signals-additional-time" data-timestamp="1385973345" data-timestamp-format="MMM D YYYY h:mm A [GMT]"><?php echo $d; ?></p>
                                </div>

                            </div>
                            <div class="mention-core">
                                <div class="mention-core-wrapper">
                                    <div class="signals-left-content">
                                        <div class="signal-day"><?php echo Utils::getDayOfWeek($date); ?></div>
                                        <div class="signal-time-interval"><?php echo $date->format("h A"); ?></div>
                                    </div>
                                    <div class="alert-content">

                                        <div class="spike-stats">
                                            <p class="signal-projection"><strong><?php echo number_format($spike['value'] * 100, 1); ?></strong>%</p>
                                            <p class="signal-summary">More mentions</p>
                                        </div>
                                        <div class="spike-stats">
                                            <p class="signal-projection"><?php echo array_sum($spike['trend']); ?></p>
                                            <p class="signal-summary">Mentions in total</p>                           

                                        </div>                           
                                    </div>
                                    <div class="alert-content-graphs">

                                        <div style="height:100px" id="spike-29601087" class="mozaic-widget widget-time_series"  data-highcharts-chart="1">
                                            <div class="highcharts-container" id="highcharts-<?php echo $i; ?>" style="position: relative; overflow: hidden; width: 683px; height: 100px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif; font-size: 12px;">
                                            </div>
                                            <script>

                                                $(function() {
                                                    $('div#highcharts-<?php echo $i; ?>').highcharts({
                                                        chart: {
                                                            type: 'areaspline',
                                                            spacingBottom: 0
                                                        },
                                                        title: {
                                                            text: ''
                                                        },
                                                        subtitle: {
                                                            text: '',
                                                            floating: true,
                                                            align: 'right',
                                                            verticalAlign: 'bottom',
                                                            y: 15
                                                        },
                                                        legend: {
                                                            layout: 'vertical',
                                                            align: 'left',
                                                            verticalAlign: 'top',
                                                            x: 150,
                                                            y: 100,
                                                            floating: true,
                                                            borderWidth: 1,
                                                            backgroundColor: 'transparent'
                                                        },
                                                        xAxis: {
                                                            gridLineWidth: 0,
                                                            tickWidth: 0,
                                                            lineWidth: 0,
                                                            categories: $.map(data[<?php echo $i ?>].date, function(value, index) {
                                                                return [value];
                                                            })
                                                        },
                                                        yAxis: {
                                                            title: {
                                                                text: ''
                                                            },
                                                            showFirstLabel: false,
                                                            gridLineColor: '#C0C0C0',
                                                            gridLineDashStyle: 'Dot',
                                                            gridLineWidth: 0,
                                                            labels: {
                                                                formatter: function() {
                                                                    return this.value;
                                                                }
                                                            },
                                                            endOnTick: false,
                                                            maxPadding: 0.1
                                                        },
                                                        tooltip: {
                                                            formatter: function() {
                                                                return false;
                                                            }
                                                        },
                                                        plotOptions: {
                                                            area: {
                                                                fillOpacity: 1
                                                            },
                                                            series: {
                                                                marker: {
                                                                    fillColor: 'transparent',
                                                                    lineWidth: 0,
                                                                    lineColor: 'transparent', // inherit from series
                                                                    states: {
                                                                        hover: {
                                                                            lineWidth: 1,
                                                                            radius: 4,
                                                                            lineColor: '#EEE',
                                                                            fillColor: '#FFF'
                                                                        }
                                                                    },
                                                                }
                                                            }
                                                        },
                                                        credits: {
                                                            enabled: false
                                                        },
                                                        series: [{
                                                                name: 'Trend',
                                                                data: $.map(data[<?php echo $i ?>].trend, function(value, index) {
                                                                    return [value];
                                                                }),
                                                                fillColor: '#DDD',
                                                                events: {
                                                                    click: function(e) {
                                                                        var curDate = new Date();
                                                                        var date = new Date(e.point.category + ' ' + curDate.getFullYear());
                                                                        var trueDate = getTrueDate(date);
                                                                        var displayDate = getDisplayDate(date);
                                                                        console.log(trueDate);
                                                                        $('#selected_date').attr('datefrom', trueDate);
                                                                        $('#selected_date').attr('dateto', trueDate);
                                                                        $('#selected_date').html(displayDate + ' - ' + displayDate);
                                                                        $('#from').datepicker('setDate', trueDate);
                                                                        $('#to').datepicker('setDate', trueDate);
                                                                        $('#date-filter-widget .filter-button').addClass('selected');
                                                                        $('.url-widget-link').first().click();
                                                                    }
                                                                },
                                                            }, {
                                                                name: 'Spike',
                                                                data: $.map(data[<?php echo $i ?>].spike, function(value, index) {
                                                                    return [value];
                                                                }),
                                                                fillColor: '#f9800c',
                                                                events: {
                                                                    click: function(e) {
                                                                        var curDate = new Date();
                                                                        var date = new Date(e.point.category + ' ' + curDate.getFullYear());
                                                                        var trueDate = getTrueDate(date);
                                                                        var displayDate = getDisplayDate(date);
                                                                        console.log(trueDate);
                                                                        $('#selected_date').attr('datefrom', trueDate);
                                                                        $('#selected_date').attr('dateto', trueDate);
                                                                        $('#selected_date').html(displayDate + ' - ' + displayDate);
                                                                        $('#from').datepicker('setDate', trueDate);
                                                                        $('#to').datepicker('setDate', trueDate);
                                                                        $('#date-filter-widget .filter-button').addClass('selected');
                                                                        $('.url-widget-link').first().click();
                                                                    }
                                                                }
                                                            }]
                                                    });
                                                });
                                            </script>
                                        </div>

                                        <div class="signal-platform-indicator">
                                            <i class="icon-twitter-metrics spike-platform"></i>
                                        </div>
                                    </div>
                                    <div class="clear"></div>                        
                                </div>
                                <div class="tags-holder-container first-two-tags"><div class="mozaic-widget widget-annotable_tags" >

                                        <div class="clear"></div>

                                    </div></div> 
                                <div class="more-tags-holder">                            
                                    <i class="icon-tags"></i>
                                    <div class="more-tags-tooltip">
                                        <div class="arrow-icon"></div>
                                        <div class="tags-holder-container more-tags-container"><div class="mozaic-widget widget-annotable_tags" >

                                                <div class="clear"></div>

                                            </div></div>
                                    </div> 
                                </div>
                            </div><div class="inline-delete-form-container"></div>
                        </div>
                    </div>
                    <div class="annotables-replies-content">
                        <div class="annotations-holder-container"><div class="mozaic-widget widget-annotable_tasks_and_posts empty" >
                                <div class="tasks-and-posts">	  
                                    <div class="annotable-tasks-and-posts">
                                    </div>
                                    <div class="clear"></div>
                                </div>


                            </div></div>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </div>

    </li>
<?php endfor; ?>